<template>
  <!-- 箭头文字 -->

  <div class="top" >
    <p class="top-left">
      <img src="../../assets/image/hellowword/MarshallingOne.png" alt />
    </p>
    <div class="title">{{ title }}</div>
    <p class="top-right">
      <img src="../../assets/image/hellowword/MarshallingOne.png" alt />
    </p>
  </div>
</template>

<script>
export default {
  props: ["title"],
};
</script>

<style lang="scss" scoped>
.top {
  //   margin: 26.59px 34.59px 48.1px 35.18px;
  display: flex;
  justify-content: center;
  width: 100%;
  div {
    height: 24px;
     background-image: -webkit-linear-gradient(
    top,
    #ffffff 0%,
    rgba(255, 255, 255, 0.93) 66.28%,
    rgba(255, 255, 255, 0.48) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: HYLingXinJ;
// color:#a3d5f7;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    padding: 0 10px;
    // border: 1px solid red;
  }
  p {
    // border: 1px solid dashed;
    width: 87.23px;
    height: 11.31px;
    img {
      width: 100%;
    }
    // transform:  scaleX(-1);
  }
  .top-right {
    transform: scaleX(-1);
  }
}

//
</style>
